<template>
  <div class="report">
		<!-- 顶部导航 -->
   	<div class="top_tab">
      <span>新建会议纪要</span>
    </div>
		<div class="list">
			<div class="content">
				<mu-form ref="reportForm" :model="validateForm">
					<mu-form-item prop="select" :rules="categoryRules">
						<div class="label">
							<i>*</i>选择会议
						</div>
						<div class="selectBox">
							<p class="selectCountp">{{validateForm.select}}<span class="iconshuju_icon_xiala iconfont"></span>
								<mu-select  v-model="validateForm.select" @change="tabChange">
									<mu-option label="暂无数据" value="暂无数据" v-if="meetingList.length==0" ></mu-option>
									<mu-option v-for="item  in meetingList" :key="item.name" :label="item.name" :value="item.name"></mu-option> 
								</mu-select>
							</p>
						</div>
					</mu-form-item>
					<mu-form-item prop="content" :rules="contentRules">
						<div class="label">
							<i>*</i>纪要内容
						</div>
						<mu-text-field
							placeholder="输入纪要内容"
							multi-line
							solo
							class="input"
							v-model="validateForm.content" 
							prop="content"
						></mu-text-field>
					</mu-form-item>
				</mu-form>
				<div class="label">
					上传照片
					<span class="tip">*最多上传9张照片</span>
				</div>
				<div class="imgBlock">
					<div v-for="(item,index) in imgList" :key="index" class="img">
							<img :src="item" alt  onerror="this.onerror=null;this.src='https://media.71ydj.com/FitPjkxAJxdRFRVrDCq1sTKxxgtf'">
						<i @click="deletePic(index)">
							<img src="@as/img/wode_delete.png" alt>
						</i>
					</div>
					<uploader
						v-if="imgList.length<9"
						class="uploader"
						:after-read="onRead"
					/>
				</div>
				<div class="label fj">
					添加附件
					<span class="tip">*请在pc端后台系统添加附件</span>
				</div>
				<p class="ts" v-if="fj.length==0">暂无附件</p>
				<div class="fjs">
					<div class="fjbox" v-for="(item,index) in infos.accessory" :key="index"> 
						<img src="@as/img/dangwu_wode_fj@2x.png" alt="">
						<div class="fjname">
							<a :href="item.accessoryPath">{{item.accessoryName}}</a>
						</div>
					</div>
				</div>
				<div class="md">
					<div class="step">
						<div class="label">
							与会人员
						</div>
						<div @click="setActive(index)" v-if="md.length!=0">
							<span>{{state}}</span>
							<img src="@as/img/hongdong_dt_xia@2x.png" alt="" :class="index == 0?'ImgAscive':'ImgUnAscive'">
						</div>
					</div>
					<p class="ts" v-if="md.length==0">暂无与会人员</p>
					<div class="name" v-if="index==0 && md.length!=0">
						<span class="w">
							<span v-for="(item,index) in infos.party_name" :key="index">
								{{item}}
							</span>
						</span>
					</div>
					<div class="names" v-if="index==1 && md.length!=0">
						<span class="w">
							<span v-for="(item,index) in infos.party_name" :key="index">
								{{item}}
							</span>
						</span>
					</div>
				</div>
			</div>
			<div class="btn">
				<div class="qj" @click="submit(sta0)" :class="{'disabled':meetingList.length==0}">
					<span>存为草稿</span>
				</div>
				<div class="ch" @click="submit(sta1)" :class="{'disabled':meetingList.length==0}">
					<span>发布</span>
				</div>
			</div>
		</div>
  </div>
</template>

<script>
	import uploader from 'vant/lib/uploader'; 
	import 'vant/lib/uploader/style';
	import axios from 'axios';
	export default {
			components: {
				uploader
			},
			data() {
				return {
					fj:[],
					md:[],
					infos:{},//会议纪要详情
					sta0:0, //保存
					sta1:1, //发布
					meetingindex:0,
					meetingList:[],//选择会议
					state:'展开',
					index:0,
					qiniuData: {
						token: '',
						key: ''
					},
					refreshing: false,
					loading: false,
      		imgList: [],
					validateForm: {
						select: '',//选择会议
						content: '',//纪要内容
					},
					companyName:'',
					categoryRules: [
						{ validate: (val) => !!val, message: '请选择会议' }
					],
					contentRules: [
						{ validate: (val) => !!val, message: '请输入纪要内容' }
					],
				}
			},
			mounted() {
				this.$progress.done()
			},
			methods: {
				tabChange: function(item){
				    if(this.meetingList.length>0){
                        this.imgList=[];
                        this.meetingList.forEach(element => {
                            if(element.name===item){
                                this.meetingindex = element.id;
                                return;
                            }
                        });
                        // debugger
                        console.log(this.imgList.length)
                        // this.imgList.splice(0,this.imgList.length);
                        this.Meetingdetails();
					}

				},
				// 展开收起
				setActive: function(index) {
					if(this.index==0){
						this.index = 1
						this.state ='收起'
					}else{
						this.index = 0
						this.state ='展开'
					}
				},
				S4() {
					return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
				},
				guid() {
					return (this.S4() + this.S4() + "-" + this.S4() + "-" + this.S4() + "-" + this.S4() + "-" + this.S4() + this.S4() + this.S4());
				},
				onRead(file) {
					// debugger
					console.log(file)
					this.qiniuData.key = this.guid()
					this.qiniuData.file = file.file
					let param = new FormData(); //创建form对象
					param.append('chunk','0');//断点传输
					param.append('chunks','1');
					param.append('file',file.file,file.file.name)
					param.append('token',this.qiniuData.token)
					param.append('key',this.qiniuData.key)
					console.log(param.get('file')); //FormData私有类对象，访问不到，可以通过get判断值是否传
					const url = `https://up-z2.qiniup.com`
					axios.post(url,param,{headers: {'Content-Type':'multipart/form-data'}}).then(res=>{
						console.log(res)
						let pic = `https://media.71ydj.com/${res.data.key}`
						this.imgList.push(pic)
					})
				},
				getToken() {
					const url = `index/index/qiniu`
					this.$http.post(url).then(res => {
						this.qiniuData.token = res.data.token
					})
				},
				deletePic(i){
					this.imgList.splice(i,1)
				},
				// 获取可以添加会议纪要的会议列表
				async getMeeting () {  
					let that = this;
					try {
						let params = {
							uid: JSON.parse(Cookies.get('user_71ydj')).id,
						}
						const url = `/app/meeting/get_meeting`
						let res = await that.$http.get(url, params);
						that.$progress.done();
						if (res.code === 200) {
							that.meetingList = res.data;
                            that.meetingindex =res.data[0].id;
                            that.validateForm.select =res.data[0].name;
                            that.Meetingdetails();
							console.log(res.data)
						}
					} catch (e) {
						console.log('​catch -> e', e)
					}
				},
				// 获取会议纪要详情
				async Meetingdetails () {
				    if(this.meetingList.length==0){
				        return false
					}
					let that = this;
					// debugger
					try {
						let params = { 
							meeting_id:that.meetingindex,
						}
						const url = `/app/meeting/minutes_info`;
						let res = await that.$http.get(url, params)
						that.$progress.done();
						if (res.code === 200) {
						    if(Object.keys(res.data).length>0){
                                that.infos = res.data;
                                console.log(res.data)
                                if(typeof(res.data.accessory) != "undefined")
                                {
                                    that.fj = res.data.accessory;
                                }

                                that.md = res.data.party_name;
                                that.validateForm.content = res.data.summary;
                                console.log(res);
                                if(res.data.picture){
                                    for(var i=0;i<res.data.picture.length;i++){
                                        that.imgList.push(res.data.picture[i].picture);
                                    }
                                }
							}else{
                                that.infos=[];
                                that.imgList=[];
                                that.md = '';
                                that.validateForm.content ='';
                                that.fj =[]
							}


						}
					} catch (e) {
						console.log('​catch -> e', e);
					}
				},
				// 提交
				submit(num) {
					let that = this;
					let status = num;
					if(this.meetingList.length==0){
					    return false
					}
					that.$refs.reportForm.validate().then((result) => { 
						if (result) {
							let params = {
								meeting_id : that.meetingindex,
								theme : that.validateForm.select,
								summary : that.validateForm.content,
								status : status,
								picture: that.imgList.join(',')
							}
							const url = `app/meeting/issue`
							that.$http.post(url, params).then(res => {
								if (res.code === 200) {
									that.$toast.success(res.msg);
									 setTimeout(function () {
											//要延时执行的代码
										 	console.log(that.$router)
                                         	that.$router.replace({ path: '../organization/organizationLife_two' })
										}, 1000) //延迟时间
								} else {
									that.$toast.error(res.msg);
								}
							})
						}
					});
				},
			},
			created(){
				this.getMeeting();
				this.getToken();
			}
	}
</script>
<style lang="scss">
.report{
 /* 顶部tab */
	.top_tab {
		width:100%;
		height:50px;
		padding:0 15px;
		background: #FFF;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 20;
		span {
			color: #333;
			font-size: 18px;
			font-weight: bold;
		}
	}
	
	.list{	
		width:100%;
		padding: 15px 15px;
		box-sizing: border-box;
		justify-content: center;
		.content{
			box-sizing: border-box;
			width: 100%;
			padding: 0 0;
			.label{
				font-size:16px;
				font-family:PingFang-SC-Medium;
				font-weight:500;
				color:#333333;
				margin-bottom: 10px;
				i{
					font-style: normal;
					color:rgba(235,77,68,1);
					margin-right: 5px;
				}
				span{
					font-size:10px;
					font-family:PingFang-SC-Medium;
					font-weight:500;
					color:rgba(153,153,153,1);
				}
			}
			.fj{
				margin-top: 10px;
			}
			input,textarea{
				width: 100%;
				box-sizing: border-box;
				height:40px;
				background:rgba(255,255,255,1);
				border:1px solid rgba(221,221,221,1);
				border-radius:4px;
				font-size:14px;
				font-family:PingFang-SC-Medium;
				font-weight:500;
				padding: 0 20px;
				outline: 0;
				&::placeholder{  
					color:rgba(204,204,204,1);
				}
			}
			textarea{
				padding: 14px 15px;
				height: 200px !important;
			}
			.imgBlock{
				.img{
					position: relative;
					display: inline-block;
					width:107px;
					height:107px;
					margin-right: 11px;
					border-radius:4px;
					margin-top: 7px;
					>img{
						width:107px;
						height:107px;
						border-radius:4px;
					}
					&:nth-of-type(3n){
						margin: 0
					}
					i{
						z-index: 99;
						position: absolute;
						top: -7px;
						right: -7px;
						width:20px;
						height:20px;
						img{
							display: block;
							width: 100%;
							height:100%;
						}
					}
				}
				.uploader{
					display: inline-block;
					width:107px;
					height:107px;
					border-radius:4px;
					background: url(../../../../assets/img/add_photo.png) center no-repeat;
					background-size: 100% 100%;
				}
			}
			.ts{
				font-size: 13px;
				color: #999 !important;
			}
			.fjs{
				width:100%;
				display: flex;
				flex-direction: column;
				padding: 3px 0;
				.fjbox{
					width:100%;
					display: flex;
					align-items: center;
					margin-bottom: 5px;
					img{
						width:17px;
						height:16.5px;
					}
					.fjname{
						width:80%;
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
						display: flex;
						align-items: center;
						margin-top: 3px;
						a{
							text-decoration:none; 
							font-size: 13px;
							color: #999 !important;
							display: inline-block;
							line-height: 1.2;
							overflow: hidden;
							padding: 0;
							text-overflow:ellipsis;
							white-space: nowrap;
							margin-left: 5px;
						}
					}
					
				}
			}
			.md{
				width:100%;
				display: flex;
				flex-direction: column;
				margin-top: 15px;
				.step{
					width:100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.label{
						font-size:16px;
						font-family:PingFang-SC-Medium;
						font-weight:500;
						color:#333333;
						margin-bottom: 8px;
					}
					div{
						display: flex;
						align-items: center;
						span{
							font-size: 12px;
							color:#999;
						}
						img{
							width:10px;
							height:8.5px;
							margin-left: 3px;
						}
					}
				
				}
				.name{
					width:100%;
					border:1px solid #ddd;
					padding: 10px 15px;
					border-radius: 8px;
					box-sizing: border-box;
					display: flex;
					flex-wrap: wrap;
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
					margin-top: 10px;
					span{
						font-size: 12px;
						color: #666;
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
					}
				}
				.name .w span::after{
					content: "、";
				}
				.names{
					width:100%;
					border:1px solid #ddd;
					padding: 10px 15px;
					border-radius: 8px;
					box-sizing: border-box;
					display: flex;
					flex-wrap: wrap;
					margin-top: 10px;
					span{
						font-size: 12px;
						color: #666;
					}
				}
			}
			.names .w span::after{
				content: "、";
			}
			.selectBox{
				width:100%;
				margin-top: 14px;
				.selectCountp{
					width:100%;
					border:1px solid #ddd;
					border-radius: 5px;
					height:40px;
					font-size: 14px;
					color: #666;
					padding: 0 15px;
					position: relative;
					display: flex;
					align-items: center;
					.mu-input{
						position: absolute;
						left: 0;
						top:0;
						width: 100%;
						height: 100%;
						opacity: 0;
						border:1px solid red;
					}
					.iconfont{
						color: #ccc;
						font-size: 14px;
						position: absolute;
						right: 15px;
						top:50%;
						transform: translateY(-50%);
					}
				}
			}
		}
		.btn{
			width:100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 68px;
			margin-bottom: 20px;
			.qj{
				width:49%;
				height:45px;
				border-radius: 5px;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #fde3da;
				&.disabled{
					background: #ccc !important;
					span{
						color: white;
					}
				}
				span{
					font-size: 16px;
					color: #eb4d44;
				}
			}
			.ch{
				width:49%;
				height:45px;
				border-radius: 5px;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #eb4d44;
				&.disabled{
					background: #ccc !important;
				}
				span{
					font-size: 16px;
					color: #FFF;
				}
			}

		}
	}	
		/* 180°旋转图片。 */
	.ImgAscive{
		transform: rotate(180deg); 
		transition: All 0.4s ease; 
		-webkit-transition: All 0.4s ease;
	}

	.ImgUnAscive{
		transform: rotate(360deg); 
		transition: All 0.4s ease; 
		-webkit-transition: All 0.4s ease; 
	}
}
</style>
